<template>
	<view class="refund">
		<view class="main">
			<view class="state-text">
				<view class="text">退款成功</view>
				<view class="time">2019-06-24 16:24:56</view>
				<image src="/static/img/orderstate_5.png" />
			</view>
			<view class="refund-text">
				退款金额
				<text class="price">￥158.00</text>
			</view>
			<view class="cut-off"></view>
			<view class="shop">
				<image src="/static/img/logo2.png" class="imgthumb" />
				<view class="text">
					<view class="title">夏装2019辛苦女神时尚洋气气质小个子阔腿套装</view>
					<view class="trait">
						颜色分类：红色
						<text class="right">×1</text>
					</view>
					<view class="trait">尺寸：S</view>
				</view>
			</view>
			<view class="particulars">
				<view>
					<view>退款原因：不想买了</view>
					<view>退款金额：¥158.00</view>
					<view>申请时间：2019-06-21 10:22:23</view>
					<view>退款编号：175896336966669</view>
				</view>
			</view>
			<view class="relation">
				<image src="/static/img/service1.png" />
				联系客服
			</view>
		</view>
	</view>
</template>

<style lang="less" scoped>
page {
	background: #ffffff;
}
.refund {
	height: 100%;
	background: #fff;
	.main {
		// position: absolute;
		// top: 80rpx;
		// bottom: 0;
		// width: 100%;
		// overflow: auto;
		.state-text {
			position: relative;
			background: #bd3c8c;
			color: #fff;
			padding: 73rpx 0 71rpx 66rpx;
			.text {
				font-size: 32rpx;
				margin-bottom: 32rpx;
			}
			.time {
				font-size: 24rpx;
			}
			image {
				position: absolute;
				right: 0rpx;
				top: 40rpx;
				width: 186rpx;
				height: 186rpx;
			}
		}
		.refund-text {
			line-height: 106rpx;
			font-size: 28rpx;
			padding: 0 20rpx;
			.price {
				font-size: 32rpx;
				color: #bd3c8c;
				float: right;
			}
		}
		.shop {
			padding: 20rpx;
			display: flex;
			image {
				width: 200rpx;
				height: 200rpx;
			}
			.text {
				margin-left: 20rpx;
				line-height: 44rpx;
				.title {
					font-size: 28rpx;
					height: 88rpx;
					margin-bottom: 10rpx;
				}
				.trait {
					font-size: 24rpx;
					color: #999999;
				}
			}
		}
		.particulars {
			padding: 20rpx;
			line-height: 72rpx;
			font-size: 36rpx;
			color: #999999;
		}
		.relation {
			text-align: center;
			line-height: 115rpx;
			border-top: 1rpx solid #e1e1e1; /*no*/
			image {
				width: 51rpx;
				height: 51rpx;
				position: relative;
				top: 10rpx;
				margin-right: 23rpx;
			}
		}
	}
}
</style>
